<template>
	<view>
		<view class="status_bar cal"></view>
		<search-box class="cal"></search-box>
		<view class="cal" style="height: 20rpx;"></view>

		<view class="flex" style="background: #f0f3f8;">
			<!-- 左侧 -->
			<scroll-view scroll-y="true" class="font text-light-black" style="width: 180rpx;padding: 0 20rpx;"
				:style="{height: `${calHeight}rpx`}">
				<block v-for="(item, index) in leftListRes" :key="index">
					<view class="animated fadeIn" :class="leftIndex === index ? 'selected pulse font-weight-bold' : ''"
						style="height: 150rpx;line-height: 150rpx;" @tap="leftToright(index)">{{item}}</view>
				</block>
			</scroll-view>
			<!-- 右侧 -->
			<scroll-view scroll-y :scroll-into-view="rightIndex" scroll-with-animation
				:style="{height: `${calHeight}rpx`}" @scroll="rightToleft">
				<block v-for="(item, index) in rightListRes" :key="index">
					<view style="height: 249rpx;margin-bottom: 70rpx;" :id="`right${index}`">
						<!-- 顶部标题 -->
						<view class="flex align-center justify-center" style="height: 80rpx;line-height: 80rpx;">
							<text class="mr-1">{{item.text}}</text>
							<my-icon iconId="icon-youjiantou" iconSize="40"></my-icon>
						</view>
						<!-- 底部内容 -->
						<view class="flex flex-wrap bg-white rounded font" style="height: 169rpx;">
							<block v-for="(mitem, mindex) in item.content" :key="mindex">
								<view class="flex align-center justify-center" style="width: calc(100% / 3);">{{mitem}}
								</view>
							</block>
						</view>
					</view>
				</block>
				<!-- 占位 -->
				<view :style="{height: `${calHeight - 319}rpx`}"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		sortResources as resources
	} from './sortResources'
	import unit from '@/common/unit'
	import searchBox from '@/components/searchBox.vue'
	export default {
		data() {
			return {
				calHeight: 0, // 屏幕高度
				leftIndex: '', // 右侧信息栏的index
				rightIndex: '', // 左侧信息栏的index
			}
		},
		components: {
			searchBox
		},
		computed: {
			// 左侧数据
			leftListRes() {
				let res = resources.map(item => item.text)
				return res
			},
			// 右侧数据
			rightListRes() {
				let res = resources.map(item => item)
				return res
			}
		},
		methods: {
			// 左联动右
			leftToright(i) {
				this.rightIndex = `right${i}`
			},
			// 右联动左
			rightToleft(e) {
				let curScrillTop = e.detail.scrollTop,
					standardVal = unit.Topx(319),
					curIndex = Math.round(curScrillTop / standardVal)
				this.leftIndex = curIndex
			}
		},
		mounted() {
			// 动态获取高度
			unit.calSurplusHeight({
				pageId: this,
				pos: 'cal',
				isTabBarPage: true,
				success: val => this.calHeight = val
			})
		}
	}
</script>

<style>
	.selected {
		color: #f7646d;
	}
</style>
